<template>
  <div class='tabDeviceDetail'>
    <table class="curTable" border="1" style="border-collapse: collapse;width:95%;">
      <tr>
        <td>客户端ID</td>
        <td>{{deviceInfo&& deviceInfo.deviceId}}</td>
        <td>名称</td>
        <td>{{deviceInfo&& deviceInfo.name}}</td>
        <td>模型</td>
        <td>{{deviceInfo&& deviceInfo.model}}</td>
        <td>设备标识</td>
        <td>{{deviceInfo&& deviceInfo.esn}}</td>
        <td>网卡号</td>
        <td>{{deviceInfo&& deviceInfo.macAddress}}</td>
      </tr>
      <tr>
        <!-- <td>厂商名</td>
        <td>{{deviceInfo&& deviceInfo.vendor}}</td> -->
        <td>产品厂商名称</td>
        <td>{{ deviceInfos.manufacturerName }}</td>
        <td>状态</td>
        <td v-if="deviceInfo && deviceInfo.state=='running'">在线</td>
        <td v-else></td>
        <td>版本</td>
        <td>{{deviceInfo&& deviceInfo.version}}</td>
        <td>补丁版本</td>
        <td>{{deviceInfo&& deviceInfo.patchVersion}}</td>
        <td>同步时间</td>
        <td> {{deviceInfo&& deviceInfo.eventTime}}</td>
      </tr>
      <tr>
        <td>配置名称</td>
        <td>{{deviceInfo&& deviceInfo.cfgfileName ? deviceInfo.cfgfileName:''}}</td>
        <td>配置hash</td>
        <td style="width: 100px;">{{deviceInfo&& deviceInfo.cfgfileHash?deviceInfo.cfgfileHash:''}}</td>
        <td>设备启动时间</td>
        <td>{{deviceInfo&& deviceInfo.clockBootDatetime}}</td>
        <td>运行时长</td>
        <td> {{deviceInfo&& deviceInfo.clockUpTimes? timeFormatter(deviceInfo.clockUpTimes):''}}</td>
        <td>位置状态</td>
        <td> {{deviceInfo&& deviceInfo.locationStatus}}</td>

      </tr>
      <tr>
        <td>网关ID</td>
        <td>{{ deviceInfos.gatewayId }}</td>
        <td>节点类型</td>
        <td>
          <template>
            <span v-if="deviceInfos.nodeType == 'ENDPOINT'">终端设备</span>
            <span v-if="deviceInfos.nodeType == 'GATEWAY'">网关设备</span>
            <span v-if="deviceInfos.nodeType == 'UNKNOW'">未知设备</span>
          </template>
        </td>
        <td>创建设备时间</td>
        <td>{{ deviceInfos.createTime }}</td>
        <td>最后修改设备时间</td>
        <td>{{ deviceInfos.lastModifiedTime }}</td>
        <td>设备描述</td>
        <td>{{ deviceInfos.description }}</td>
      </tr>
      <tr>
        <td>产品厂商 ID</td>
        <td>{{ deviceInfos.manufacturerId }}</td>
        <td>设备类型</td>
        <td>{{ deviceInfos.deviceType }}</td>
        <td>型号</td>
        <td>{{ deviceInfos.model }}</td>
        <td>协议类型</td>
        <td>{{ deviceInfos.protocolType }}</td>
        <td>设备是否冻结</td>
        <td>
          <template>
            <span v-if="deviceInfos.mute == 'FALSE'">否</span>
            <span v-if="deviceInfos.mute == 'TRUE'" style="color: red">是</span>
          </template>
        </td>
      </tr>
    </table>
    <table class="curTable curTable1" border="1" style="border-collapse: collapse;width:95%;margin-top:15px">
      <tr>
        <td rowspan="2" style="background: #eef1f6;">设备主系统存储空间</td>
        <td style="background: #eef1f6;text-align: center;">存储空间总大小</td>
        <td style="background: #fff;text-align: center;">{{  systemStorage.totalSize || 0 }}MB</td>
        <td rowspan="2" style="background: #eef1f6;text-align: center;">用户分区存储空间</td>
        <td style="background: #eef1f6;text-align: center;">存储空间总大小</td>
        <td style="background: #fff;text-align: center;">{{   userStorage.totalSize  || 0  }}MB</td>
      </tr>
      <tr>
        <td>存储空间使用大小</td>
        <td style="background: #fff;text-align: center;">{{  systemStorage.usedSize || 0 }}MB</td>
        <td>存储空间使用大小</td>
        <td style="background: #fff;text-align: center;">{{   userStorage.usedSize  || 0  }}MB</td>
      </tr>
      <tr>
        <td rowspan="2" style="background: #eef1f6;">日志分区存储空间</td>
        <td style="background: #eef1f6;text-align: center;">存储空间总大小</td>
        <td style="background: #fff;text-align: center;">{{  logStorage.totalSize || 0 }}MB</td>
        <td rowspan="2" style="background: #eef1f6;text-align: center;">设备外扩存储介质空间</td>
        <td style="background: #eef1f6;text-align: center;">存储空间总大小</td>
        <td style="background: #fff;text-align: center;">{{   externalStorage.totalSize  || 0  }}MB</td>
      </tr>
      <tr>
        <td style="background: #eef1f6;text-align: center;">存储空间使用大小</td>
        <td style="background: #fff;text-align: center;">{{   logStorage.usedSize  || 0  }}MB</td>
        <td style="background: #eef1f6;text-align: center;">存储空间使用大小</td>
        <td style="background: #fff;text-align: center;">{{   externalStorage.usedSize  || 0  }}MB</td>
      </tr>
      <tr>
        <td colspan="2">cpu使用率</td>
        <td style="background: #fff;text-align: center;">{{  deviceInfo.performanceCpuUseRate || 0 }}%</td>
        <td colspan="2">内存使用率</td>
        <td style="background: #fff;text-align: center;">{{ deviceInfo.performanceMemoryUseRate || 0}}%</td>
      </tr>
    </table>
  </div>
</template>

<script>

import * as api from '@/api/link/deviceInfo'
import * as apis from "@/api/link/device";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      deviceId: null,
      nodeId: null,
      deviceInfo: {},
      deviceInfos: {}
    }
  },
  //监听属性 类似于data概念
  computed: {
    systemStorage() {
      let newArr = this.deviceInfo.storagesUseRate && this.deviceInfo.storagesUseRate.find(item => {
        return item.device == 'system storage'
      })
      
      if (newArr) {
        return newArr
      } else {
        return {}
      }
    },
    userStorage() {
      let newArr = this.deviceInfo.storagesUseRate && this.deviceInfo.storagesUseRate.find(item => {
        return item.device == 'user storage'
      })
      
      if (newArr) {
        return newArr
      } else {
        return {}
      }
    },
    logStorage() {
      let newArr = this.deviceInfo.storagesUseRate && this.deviceInfo.storagesUseRate.find(item => {
        return item.device == 'log storage'
      })
      
      if (newArr) {
        return newArr
      } else {
        return {}
      }
    },
    externalStorage() {
      let newArr = this.deviceInfo.storagesUseRate && this.deviceInfo.storagesUseRate.find(item => {
        return item.device == 'external storage0'
      })
      
      if (newArr) {
        return newArr
      } else {
        return {}
      }
    }
  },
  //监控data中的数据变化
  watch: {
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.deviceId = this.$route.query.deviceId
    this.nodeId = this.$route.query.nodeId
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.detail()
    this.get();
  },
  methods: {
    detail() {
      api.get({ "esn": this.nodeId }).then(resp => {

        this.deviceInfo = resp.data;
      })
    },
    get() {
      apis.get({ deviceId: this.nodeId }).then((resp) => {
        

        this.deviceInfos = resp.data;
      });
    },
    timeFormatter(time) {
      var theTime = parseInt(time); // 需要转换的时间秒
      var theTime1 = 0; // 分
      var theTime2 = 0; // 小时
      var theTime3 = 0; // 天
      if (theTime > 60) {
        theTime1 = parseInt(theTime / 60);
        theTime = parseInt(theTime % 60);
        if (theTime1 > 60) {
          theTime2 = parseInt(theTime1 / 60);
          theTime1 = parseInt(theTime1 % 60);
          if (theTime2 > 24) {
            // 大于24小时
            theTime3 = parseInt(theTime2 / 24);
            theTime2 = parseInt(theTime2 % 24);
          }
        }
      }
      var result = '';
      if (theTime > 0) {
        result = "" + parseInt(theTime) + "秒";
      }
      if (theTime1 > 0) {
        result = "" + parseInt(theTime1) + "分" + result;
      }
      if (theTime2 > 0) {
        result = "" + parseInt(theTime2) + "小时" + result;
      }
      if (theTime3 > 0) {
        result = "" + parseInt(theTime3) + "天" + result;
      }
      return result;
    }
  },
}
</script>
<style lang='scss' scoped>
.tabDeviceDetail {
  padding: 10px;
  .curTable {
    border: solid #cdd7e2;
    border-width: 1px 0px 0px 1px;
    tr {
      td {
        border: solid #cdd7e2;
        border-width: 0px 1px 1px 0px;
        padding-left: 10px;
        line-height: 2;
        background-color: #eef1f6;
        color: #687b91;
        font-size: 12px;
      }
      td:nth-of-type(2n-1) {
        width: 150px !important;
        text-align: center;
      }
      td:nth-of-type(2n) {
        width: 180px !important;
        background: #fff;
      }
    }
  }
  .curTable {
  }
}
</style>
